<template>
    <div class="common-layout">
      <el-container>
        <el-aside  width="auto">Aside
            <Ln></Ln>
        </el-aside>
        <el-container>
          <el-header>Header
            <Tn></Tn>
          </el-header>
          <el-main>Main
            <RouterView></RouterView>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>

<script setup lang="ts">
// 引用左侧导航栏组件
import Ln from './components/LeftNav.vue'
// 引入头部组件
import Tn from './components/TopNav.vue'
</script>

<style lang="scss">
.common-layout{
    .el-aside{
        background-color: pink;
    }
    .el-header{
        background-color: palegoldenrod;
    }
    .el-main{
        background-color: skyblue;
    }
}
 .el-aside,.el-container,.common-layout,#app,body,html{
    height: 100%;//高度自适应
 }
</style>